<!-- 商品图片 -->
<div class="goods-gallery">
    <!-- 主图容器 - 2:1 比例 -->
    <div class="goods-image-container relative bg-gray-100 rounded-sm overflow-hidden">
        <img id="main-image" src=""
            data-src="{$goods.image}" alt="{$goods.name}" class="w-full h-full object-cover cursor-pointer"
            onclick="GoodsDetail.openImageViewer()" ondblclick="GoodsDetail.openImageViewer()" title="点击查看大图">

        <!-- 左右箭头 - 只在图片数量大于1时显示 -->
        {if count($goods.slider_image) > 1}
        <button id="prev-image" onclick="GoodsDetail.previousImage()"
            class="image-nav-btn absolute left-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white w-8 h-8 rounded-full flex items-center justify-center">
            <i class="fas fa-chevron-left text-sm"></i>
        </button>

        <button id="next-image" onclick="GoodsDetail.nextImage()"
            class="image-nav-btn absolute right-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white w-8 h-8 rounded-full flex items-center justify-center">
            <i class="fas fa-chevron-right text-sm"></i>
        </button>

        <!-- 图片指示器 -->
        <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-xs">
            <span id="current-image-index">1</span> / {$goods.slider_image|count}
        </div>
        {/if}
    </div>

    <!-- 隐藏的GLightbox图片链接 -->
    <div id="lightbox-gallery" class="hidden">
        {volist name="goods.slider_image" id="image" key="index"}
        <a href="{$image}" class="glightbox" data-gallery="goods-gallery" data-title="{$goods.name} - 图片 {$index}"
            data-description="商品图片">
            <img src="{$image}" alt="商品图片{$index}">
        </a>
        {/volist}
    </div>
    <div class="flex items-center space-x-3 flex-shrink-0 mt-2 justify-between w-full px-2">
        <!-- 收藏按钮 -->
        <button id="favorite-btn" onclick="toggleFavorite({$goods.id})"
            class="h-10 flex items-center justify-center rounded-full transition-all duration-200 {if $goods.is_favorited}border-red-400 text-red-500 hover:text-gray-500{else}border-gray-300 text-gray-500  hover:text-red-500{/if}"
            title="收藏商品">
            <i class="{if $goods.is_favorited}fas{else}far{/if} fa-heart"></i>
            <span class="text-xs ml-1">收藏</span>
        </button>
        <!-- 分享按钮 -->
        <button onclick="shareGoods()"
            class="h-10 flex items-center justify-center rounded-full border-gray-300 text-gray-500 hover:border-blue-400  hover:text-blue-500 transition-all duration-200"
            title="分享商品">
            <i class="fas fa-share-alt"></i>
            <span class="text-xs ml-1">分享</span>
        </button>
    </div>
</div>